<!--
 * @Autor: Gct
 * @Description: 详情页
 * @Date: 2022-04-14 15:24:26
 * @LastEditors: Gct
 * @LastEditTime: 2022-04-14 18:31:54
-->
<template>
  <div>
    <el-button type="text" @click="$router.go(-1)">返回</el-button>
    <!-- 表格开始 -->
    <div>
      <el-table :data="orderDetails.orderLines" style="width: 100%">
        <el-table-column
          prop="id"
          label="订单项编号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="productId"
          label="产品编号"
          width="180"
        ></el-table-column>
        <el-table-column prop="product.name" label="产品"> </el-table-column>
        <el-table-column prop="product.photo" label="产品图片">
          <template slot-scope="scope">
            <el-popover placement="right-start" trigger="hover">
              <img width="400px" :src="scope.row.product.photo" alt="" />
              <img
                width="50px"
                slot="reference"
                :src="scope.row.product.photo"
                alt=""
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="number" label="数量"> </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
    <!-- 卡片开始 -->
    <div class="card" style="margin-top: 50px;text-align:center" >
      <!-- 卡片1开始 -->
      <div
        class="card1"
        style="
          display: inline-block;
          width: 30%;
          vertical-align: top;
          margin: 0 auto;
        "
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单详情</span>
          </div>
          <div style="margin-top: 10px">订单编号:{{ orderDetails.id }}</div>
          <div style="margin-top: 10px">
            下单时间:{{ orderDetails.orderTime }}
          </div>
          <div style="margin-top: 10px">订单金额:{{ orderDetails.total }}</div>
          <div style="margin-top: 10px">订单状态:{{ orderDetails.status }}</div>
        </el-card>
      </div>
      <!-- 卡片1结束 -->
      <!-- 卡片2开始 -->
      <div
        class="card2"
        style="
          display: inline-block;
          width: 30%;
          vertical-align: top;
          margin: 0 auto;
        "
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>下单者信息</span>
          </div>
          <div style="margin-top: 10px">
            下单者:{{ orderDetails.customer.realname }}
          </div>
          <div style="margin-top: 10px">
            下单者手机号:{{ orderDetails.customer.telephone }}
          </div>
        </el-card>
      </div>
      <!-- 卡片2结束 -->
      <!-- 卡片3开始 -->
      <div
        class="card3"
        style="
          display: inline-block;
          width: 30%;
          vertical-align: top;
          margin: 0 auto;
        "
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>雇主信息</span>
          </div>
          <div style="margin-top: 10px">
            雇主:{{ orderDetails.address.username }}
          </div>
          <div style="margin-top: 10px">
            雇主手机号:{{ orderDetails.address.telephone }}
          </div>
          <div style="margin-top: 10px">
            服务地址:{{ orderDetails.address.city }}-{{
              orderDetails.address.area
            }}
          </div>
        </el-card>
      </div>
      <!-- 卡片3结束 -->
    </div>
    <!-- 卡片结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 订单详情对象
      orderDetails: {},
    };
  },
  created() {
    console.log(this.$route.query);
    this.orderDetails = this.$route.query;
  },
};
</script>
<style lang="scss">
.el-card__header {
  background-color: #f3f3f3;
}
</style>